import React, { Component } from 'react'
import Tabbar from '../Tabbar/Tabbar'
import Search from '../Search/Search'
import styles from './Bookrack.module.scss'
import {withRouter} from 'react-router-dom'

class Bookrack extends Component {
  state = {
    bookinfoList:[]
  }
  componentDidMount(){
    let bookinfoList = JSON.parse(localStorage.getItem("bookinfoList"));
    if(bookinfoList){
      if(bookinfoList.length){
        this.setState({
          bookinfoList:[...bookinfoList]
        })
      }else{
        let arr = []
        arr.push(bookinfoList)
        this.setState({
          bookinfoList:arr
        })
      }
    }
  }
  render() {
    console.log(this.state.bookinfoList)
    if(this.state.bookinfoList.length>0){
      return (
        <div className={styles.Bookrack}>
          <Search  disabled={true} right={false}></Search>
          <div className={styles.center}>
            {this.state.bookinfoList&&this.state.bookinfoList.map((v)=>{
              return <div className={styles.item} key = {v.id}>
                <img onClick={()=>{
                  this.props.history.push('detailed/'+v.id)
                }} src={v.icon} alt=""/>
                <p> {v.name} </p>
              </div>
            })}
            <div className={styles.item+ ' '+styles.add} onClick={()=>{
              this.props.history.push('booktown')
            }} >
                +
              </div>
          </div>
          <Tabbar></Tabbar>
        </div>
      )
    }else{
      return (
        <div className={styles.Bookrack}>
          <Search  disabled={true} right={false}></Search>
          <div className={styles.Bookracks}>
           <img className={styles.backg} src="/pgc-image/backg.png" alt=""/>
           </div>
           <div className={styles.backgtext}>把生命浪费在美好的事物上</div>
           <p className={styles.backhbot} onClick={()=>{
             this.props.history.push('booktown')
           }}>去书城</p>
          <Tabbar></Tabbar>
        </div>
      )
    }
  }
}
export default withRouter(Bookrack);
